<template>
  <view class="contentss">
    <view class="spC">
      <view class="sp" v-for="(item,index) in detail.product">
        <img :src="item.product_image" alt="" />
        <view class="remake">{{item.product_title}}</view>
        <view class="all">
          <span class="num">￥{{item.sku_price}}</span>
          <span class="alls">共{{item.product_num}}件</span>
        </view>
      </view>
    </view>
    <view class="formC">
      <u--form :model="model" ref="uForm" labelWidth="80">
        <view class="form-item">
          <u-form-item borderBottom label="物流状态" @click="showAuto = true">
            <u--input
              class="right"
              v-model="dahuotext"
              disabled
              disabledColor="#ffffff"
              placeholder="是否收到货"
              border="none"
            ></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
        </view>
        <view class="form-item">
          <u-form-item borderBottom label="退款类型" @click="tklx = true">
            <u--input
              class="right"
              v-model="typetext"
              disabled
              disabledColor="#ffffff"
              placeholder="请选择退款类型"
              border="none"
            ></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
        </view>
        <view class="form-item">
          <u-form-item borderBottom label="退款原因" @click="tkyy = true">
            <u--input
              class="right"
              v-model="reasontext"
              disabled
              disabledColor="#ffffff"
              placeholder="退款的原因"
              border="none"
            ></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
        </view>
      </u--form>
    </view>
    <view class="formC">
      <u--form :model="model" ref="uForm" labelWidth="80">
        <view class="form-item">
          <u-form-item borderBottom label="退款金额" @click="shdz = true">
            <u--input
              class="right"
              v-model="retuenprice"
              disabledColor="#ffffff"
              :placeholder="'退款金额不能超过'+detail.pay_price+'元'"
              border="none"
            ></u--input>
          </u-form-item>
        </view>
      </u--form>
    </view>
    <view class="formC">
      <u--form :model="model" ref="uForm" labelWidth="80">
        <view class="form-item">
          <view class="desc">
            <u--textarea
              class="textr"
              v-model="desctext"
              placeholder="请描述申请退货服务的具体原因"
            ></u--textarea>
          </view>
          <view class="upload">
           <u-upload
           		:fileList="fileList1"
           		@afterRead="afterRead"
           		@delete="deletePic"
           		name="1"
           		multiple
           		:maxCount="10"
           	></u-upload>
            <text class="pz">上传凭证</text>
          </view>
        </view>
      </u--form>
    </view>
    <view class="hande">
      <u-button
        color="linear-gradient(90deg, #0096FF 0%, #003DB1 100%)"
        class="hande" @click="submit()">提交</u-button>
    </view>
    <u-picker
      :show="showAuto"
      title="是否到货"
      :columns="columns"
      @cancel="showAuto = false"
      @confirm="authSelect"
      confirmColor="#3cff42"
    ></u-picker>
    <u-picker
      :show="tklx"
      title="退款类型"
      :columns="tklxList"
      @cancel="tklx = false"
      @confirm="subtklx"
      confirmColor="#3cff42"
    ></u-picker>
    <u-picker
      :show="tkyy"
      title="退款原因"
      :columns="tkyyList"
      @cancel="subTkyy"
      @confirm="subTkyy"
      confirmColor="#3cff42"
    ></u-picker>
  </view>
</template>
<script>
export default {
  data() {
    return {
      tkyy: false,
      tkyyList: [["没收到货"]],
	  reasontext:"",
	  reason:"",
	  dahuo:"",
	  dahuotext:"",
      tklx: false,
      tklxList: [["仅退款", "退货退款"]],
	  type:"",
	  typetext:"",
      showAuto: false,
      columns: [["是", "否"]],
      model: {
        sh: "",
      },
      shdz: false,
	  order_id:0,
	  detail:{},
	  retuenprice:"",
	  fileList1:[],
	  reason:"",
	  desctext:""
    };
  },
  onLoad(e) {
  	if(e.order_id){
		this.order_id = e.order_id
	}
	this.getproview()
  },
  methods: {
	  submit(){
		  var that = this
		  var image = []
		  this.fileList1.forEach((item,index)=>{
			  image.push(item.url)
		  })
		  console.log(image.join(','))
		  if(this.dahuo == ""){
			  this.$.ti_shi("请选择物流状态");return;
		  }
		  if(this.type == ""){
			  this.$.ti_shi("请选择退款类型");return;
		  }
		  if(this.reason == ""){
		  	this.$.ti_shi("请选择退款原因");return;
		  }
		  if(this.desctext == ""){
		  	this.$.ti_shi("请输入具体原因");return;
		  }
		  
		  console.log(this.retuenprice)
		  if(this.retuenprice > this.detail.pay_price){
			  this.$.ti_shi("退款金额不能超过"+this.detail.pay_price);return;
		  }
		  that.$.ajax(1,'POST','/user/setshouhou',{
		  	images:image.join(','),
		  	dahuo:this.dahuo.join(','),
		  	type:this.type.join(','),
		  	reason:this.reason.join(','),
			dahuotext:this.dahuotext.join(','),
			typetext:this.typetext.join(','),
			reasontext:this.reasontext.join(','),
		  	desctext:this.desctext,
			order_id:this.order_id,
			retuenprice:this.retuenprice
		  },(res)=>{
			  that.$.ti_shi(res.msg)
			  setTimeout(()=>{
				  uni.navigateBack()
			  },1000)
		  	// that.detail = res.data.detail
		  })
	  },
	  getproview(){
	  	var that = this
	  	that.$.ajax(1,'POST','/user/getorderdetail',{
	  		order_id:this.order_id
	  	},(res)=>{
	  		that.detail = res.data.detail
	  	})
	  },
    authSelect(e) {
		console.log(e)
		if(e){
			this.dahuo = e.indexs
			this.dahuotext = e.value
		}
		
		this.showAuto = false
	},
    subtklx(e) {
		if(e){
			this.type = e.indexs
			this.typetext = e.value
		}
		this.tklx = false
	},
    subTkyy(e) {
		if(e){
			this.reason = e.indexs
			this.reasontext = e.value
		}
		
		this.tkyy = false
	},
	deletePic(event) {
		this[`fileList${event.name}`].splice(event.index, 1)
	},
	// 新增图片
	async afterRead(event) {
		// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file)
		let fileListLen = this[`fileList${event.name}`].length
		lists.map((item) => {
			this[`fileList${event.name}`].push({
				...item,
				status: 'uploading',
				message: '上传中'
			})
		})
		for (let i = 0; i < lists.length; i++) {
			const result = await this.uploadFilePromise(lists[i].url)
			let item = this[`fileList${event.name}`][fileListLen]
			this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
				status: 'success',
				message: '',
				url: result
			}))
			fileListLen++
		}
	},
	uploadFilePromise(url) {
		var that = this
		return new Promise((resolve, reject) => {
			let a = uni.uploadFile({
				url: that.$.ajax_url+'index/upload', // 仅为示例，非真实的接口地址
				filePath: url,
				name: 'file',
				formData: {
					user: 'test'
				},
				success: (res) => {
					console.log(   )
					// setTimeout(() => {
						resolve(JSON.parse(res.data).data.url)
					// }, 1000)
				}
			});
		})
	},
  },
};
</script>
<style lang="scss" scoped>
.hande {
  width: 686rpx;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  bottom: -16rpx;
}
.pz {
  padding-left: 15rpx;
}
.form-item {
  // padding: 30rpx;
  margin: 30rpx 0;
  background-color: #fff;
  /deep/ .u-form-item__body__left {
    font-size: 32rpx;
    font-weight: 500;
  }
  /deep/ .u-input__content__field-wrapper__field {
    text-align: right !important;
  }
  .numBox {
    float: right;
    width: 100%;
    // display: flex;
    //justify-content: end;

    .numType {
      width: 186rpx;
      height: 48rpx;
      border-radius: 24rpx;
      background-color: #eaeaea;
      line-height: 48rpx;
      display: flex;
      text {
        flex: 1;
        text-align: center;
      }
      // .active {
      //   background-color: #016fdd;
      //   border-radius: 24rpx;
      //   color: #ffffff;
      // }
    }
  }

  .upload {
    margin-top: 20rpx;
    display: flex;
    flex-wrap: wrap;
    text {
      width: 100%;
      font-size: 24rpx;
      font-weight: 400;
      color: #999999;
    }
  }
  .desc {
    margin-top: 30rpx;
    padding: 23rpx 0;
    width: 100%;
    /deep/ .u-textarea {
      background: #f4f4f4;
      border: 0;
      height: 70rpx;
      font-size: 24rpx;
    }
  }
}

.formC {
  margin: 20rpx 32rpx;
  background: #fff;
  padding: 0rpx 32rpx;
  border-radius: 16rpx;
}
.contentss {
  height: 100%;
  background: #f8f8f8;
}
.spC {
  background: #fff;
  padding: 40rpx 0;
}
.sp {
  width: 100%;
  height: 88rpx;
  display: flex;
  align-items: end;
  font-size: 26rpx;
  height: 88rpx;

  img {
    width: 88rpx;
    height: 88rpx;
    margin-right: 26rpx;
    margin-left: 32rpx;
    border-radius: 8rpx;
  }
  .remake {
    width: 356rpx;
    margin-right: 72rpx;
  }
  .all {
    width: 142rpx;
    text-align: center;
    margin-right: 32rpx;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    .num {
      display: inline-block;
      width: 100%;
      font-weight: 700;
      font-size: 24rpx;
    }
    .alls {
      font-size: 22rpx;
      color: #666;
    }
  }
}
</style>